import { random } from "lodash";
import { createEffect, createSignal, For, Index } from "solid-js";
import { Word } from "../game/track/track.tsx";

export function WordBtn(
  props: {
    word: string;
    selected: boolean;
    removed: boolean;
    selectHandler: () => void;
  },
) {
  return (
    <button
      class="btn btn-xl"
      classList={{ "btn-primary": props.selected, "invisible": props.removed }}
      type="button"
      onClick={props.selectHandler}
    >
      {props.word}
    </button>
  );
}

export function Team(props: { id: number; vocabularies: Word[] }) {
  let winDialogRef!: HTMLDialogElement;

  const words = props.vocabularies.map((
    w,
  ) => [w.word, w.translation[random(w.translation.length - 1, false)]])
    .flat()
    .sort(() => random(-5, 1));

  const [removed, setRemoved] = createSignal<Set<string>>(new Set(), {
    equals: false,
  });
  const [mark, setMark] = createSignal<number>(0);
  const [selected, setSelected] = createSignal<Set<string>>(new Set(), {
    equals: false,
  });

  const select = (word: string) => () => {
    if (selected().has(word)) {
      setSelected((prev) => {
        prev.delete(word);
        return prev;
      });
      return;
    }

    setSelected((prev) => {
      prev.add(word);
      return prev;
    });
  };

  createEffect(() => {
    const isRight = (word1: string, word2: string) => {
      for (const word of props.vocabularies) {
        if (
          word.word === word1 && word.translation.includes(word2) ||
          (word.translation.includes(word1) && word.word === word2)
        ) return true;
      }
      return false;
    };
    if (selected().size === 2) {
      const selectedWords = selected().values();
      const word1 = selectedWords.next().value!;
      const word2 = selectedWords.next().value!;

      if (isRight(word1, word2)) {
        setRemoved((prev) => {
          prev.add(word1);
          prev.add(word2);
          return prev;
        });
        setMark((prev) => prev + 1);
        if (mark() === props.vocabularies.length) winDialogRef.showModal();
      }
      setSelected((prev) => {
        prev.clear();
        return prev;
      });
    }
  });

  return (
    <div class="sticky top-40 w-full h-full flex items-center justify-center">
      <div class="absolute top-6 left-1/2 -translate-x-1/2 w-40 bg-neutral rounded-box text-neutral-content items-center flex flex-col p-2">
        <span class="countdown font-mono text-5xl">
          <span
            style={{ "--value": mark() }}
            aria-live="polite"
            aria-label={mark().toString()}
          >
            {mark()}
          </span>
        </span>
        Mark
      </div>
      <div class="p-12 flex flex-wrap gap-4 items-center justify-center">
        <For each={words}>
          {(word) => (
            <WordBtn
              word={word}
              selected={selected().has(word)}
              removed={removed().has(word)}
              selectHandler={select(word)}
            >
            </WordBtn>
          )}
        </For>
      </div>
      <dialog ref={winDialogRef} class='modal'>
        <div class="modal-box">
          <h3 class="text-5xl font-extrabold">Team {props.id+1} Win!</h3>
          </div>
      </dialog>
    </div>
  );
}

export default function Game(props: { vocabularies: Word[]; teams: number }) {
  return (
    <div class="w-full h-full flex">
      <Index each={new Array(props.teams)}>
        {(_, i) => <Team id={i} vocabularies={props.vocabularies} />}
      </Index>;
    </div>
  );
}
